import React, { useEffect, useState } from 'react';
import ModelManageLeft from '@/components/content/ModelManage/left';
import ModelManageRight from '@/components/content/ModelManage/right';
import { getProjList } from '@/services/modelManageService';
import Header from '../../components/content/Header';
import ProjectList from '@/components/content/projectList';
import './index.less';

const ModelManage = () => {
  const [curProj, setCurProj] = useState();
  const [projList, setProjList] = useState([]);

  useEffect(() => {
    _getProjList();
  }, []);

  async function _getProjList() {
    const { data } = await getProjList();

    setProjList(data || []);
    setCurProj((data && data[0].objectId) || '');
  }

  function handleCurProjChange(objectId) {
    if (!objectId) {
      _getProjList();
      return;
    }

    setCurProj(objectId);
  }
  return (
    <div className="model-manage">
      <Header />
      <ProjectList />
      <ModelManageLeft
        projList={projList}
        curProj={curProj}
        onCurProjChange={handleCurProjChange}
      />
      <ModelManageRight curProj={curProj} />
    </div>
  );
};

export default ModelManage;
